<template>
  <li :style="zoom">
    <div
      ref="player"
      class="player"
      :class="[
        {
          dead: player.isDead,
          marked: session.markedPlayer === index,
          'no-vote': player.isVoteless,
          you: session.sessionId && player.id && player.id === session.playerId,
          'vote-yes': session.votes[index],
          'vote-lock': voteLocked,
        },
        player.role.team,
      ]"
    >
      <div class="shroud" @click="toggleStatus()"></div>
      <div class="life" @click="toggleStatus()"></div>

      <div
        class="night-order first"
        v-if="nightOrder.get(player).first && grimoire.isNightOrder"
      >
        <em>{{ nightOrder.get(player).first }}.</em>
        <span v-if="player.role.firstNightReminder">{{
          player.role.firstNightReminder
        }}</span>
      </div>
      <div
        class="night-order other"
        v-if="nightOrder.get(player).other && grimoire.isNightOrder"
      >
        <em>{{ nightOrder.get(player).other }}.</em>
        <span v-if="player.role.otherNightReminder">{{
          player.role.otherNightReminder
        }}</span>
      </div>

      <Token
        :role="player.role"
        :disable-click="true"
        :allow-parent-click="true"
        :is-nominated="player.isNominated"
        @set-role="$emit('trigger', ['openRoleModal'])"
        @click="openActionPanel"
      />

      <!-- 语音禁言标志（围坐圆形框上方） -->
      <div v-if="isVoiceMuted" class="voice-muted-flag" title="该玩家已被禁言">🔇</div>

      <!-- 首夜行动顺序（左侧红色圆圈） -->
      <div 
        v-if="nightOrder.get(player).first > 0" 
        class="night-order-indicator first-night"
        :title="`首夜行动顺序: ${nightOrder.get(player).first}`"
      >
        {{ nightOrder.get(player).first }}
      </div>

      <!-- 其他夜行动顺序（右侧蓝色圆圈） -->
      <div 
        v-if="nightOrder.get(player).other > 0" 
        class="night-order-indicator other-night"
        :title="`其他夜行动顺序: ${nightOrder.get(player).other}`"
      >
        {{ nightOrder.get(player).other }}
      </div>

      <!-- Overlay icons -->
      <div class="overlay">
        <font-awesome-icon
          icon="hand-paper"
          class="vote"
          :title="$t('tooltips.handUp')"
          @click="vote()"
        />
        <font-awesome-icon
          icon="times"
          class="vote"
          :title="$t('tooltips.handDown')"
          @click="vote()"
        />
        <font-awesome-icon
          icon="times-circle"
          class="cancel"
          :title="$t('tooltips.cancel')"
          @click="cancel()"
        />
        <font-awesome-icon
          icon="exchange-alt"
          class="swap"
          @click="swapPlayer(player)"
          :title="$t('tooltips.swapSeats')"
        />
        <font-awesome-icon
          icon="redo-alt"
          class="move"
          @click="movePlayer(player)"
          :title="$t('tooltips.movePlayer')"
        />
        <font-awesome-icon
          icon="hand-point-right"
          class="nominate"
          @click="nominatePlayer(player)"
          :title="$t('tooltips.nominatePlayer')"
        />
      </div>

      <!-- Claimed seat icon -->
      <font-awesome-icon
        icon="chair"
        v-if="player.id && session.sessionId"
        class="seat"
        :class="{ highlight: session.isRolesDistributed }"
      />

      <!-- Ghost vote icon -->
      <font-awesome-icon
        icon="vote-yea"
        class="has-vote"
        v-if="player.isDead && !player.isVoteless"
        @click="updatePlayer('isVoteless', true)"
        :title="$t('tooltips.ghostVote')"
      />

      <!-- On block icon -->
      <div class="marked">
        <font-awesome-icon icon="skull" />
      </div>
      <div
        class="name"
        @click="isMenuOpen = !isMenuOpen"
        :class="{ active: isMenuOpen }"
      >
        <span>{{ player.name }}</span>
        <font-awesome-icon icon="venus-mars" v-if="player.pronouns" />
        <div class="pronouns" v-if="player.pronouns">
          <span>{{ player.pronouns }}</span>
        </div>
      </div>

      <transition name="fold">
        <ul class="menu" v-if="isMenuOpen">
          <li
            @click="changePronouns"
            v-if="
              userRole !== 'storyteller' ||
              (userRole === 'storyteller' && player.id === session.playerId)
            "
          >
            <font-awesome-icon icon="venus-mars" />{{ $t("player.changePronouns") }}
          </li>
          <template v-if="userRole !== 'storyteller'">
            <li @click="changeName">
              <font-awesome-icon icon="user-edit" />{{ $t("player.rename") }}
            </li>
            <li @click="movePlayer()" :class="{ disabled: session.lockedVote }">
              <font-awesome-icon icon="redo-alt" />
              {{ $t("player.movePlayer") }}
            </li>
            <li @click="swapPlayer()" :class="{ disabled: session.lockedVote }">
              <font-awesome-icon icon="exchange-alt" />
              {{ $t("player.swapSeats") }}
            </li>
            <li @click="removePlayer" :class="{ disabled: session.lockedVote }">
              <font-awesome-icon icon="times-circle" />
              {{ $t("player.remove") }}
            </li>
            <li
              @click="updatePlayer('id', '', true)"
              v-if="player.id && session.sessionId"
            >
              <font-awesome-icon icon="chair" />
              {{ $t("player.emptySeat") }}
            </li>
            <template v-if="!session.nomination">
              <li @click="nominatePlayer()">
                <font-awesome-icon icon="hand-point-right" />
                {{ $t("player.nomination") }}
              </li>
            </template>
          </template>
          <li
            @click="claimSeat"
            v-if="userRole === 'storyteller'"
            :class="{ disabled: player.id && player.id !== session.playerId }"
          >
            <font-awesome-icon icon="chair" />
            <template v-if="!player.id">
              {{ $t("player.claimSeat") }}
            </template>
            <template v-else-if="player.id === session.playerId">
              {{ $t("player.vacateSeat") }}
            </template>
            <template v-else> {{ $t("player.seatOccupied") }} </template>
          </li>
        </ul>
      </transition>
    </div>

    <template v-if="player.reminders">
      <div
        class="reminder"
        :key="reminder.role + ' ' + reminder.name"
        v-for="reminder in player.reminders"
        :class="[reminder.role]"
        @click="removeReminder(reminder)"
      >
        <span
          class="icon"
          :style="{
            backgroundImage: `url(${
              reminder.image && grimoire.isImageOptIn
                ? reminder.image
                : require(
                    '../assets/icons/' +
                      (reminder.imageAlt || reminder.role) +
                      '.png',
                  )
            })`,
          }"
        ></span>
        <span class="text">{{ reminder.name }}</span>
      </div>
    </template>
    <div class="reminder add" @click="$emit('trigger', ['openReminderModal'])">
      <span class="icon"></span>
    </div>
    <div class="reminderHoverTarget"></div>
  </li>
</template>

<script>
import Token from "./Token";
import { mapGetters, mapState } from "vuex";
import i18n from "../i18n";
import { recordReminderRemoved } from "../utils/reminderToHistory";

export default {
  components: {
    Token,
  },
  props: {
    player: {
      type: Object,
      required: true,
    },
  },
  computed: {
    ...mapState("players", ["players"]),
    ...mapState(["grimoire", "session"]),
    ...mapState("voiceChat", ["users"]),
    ...mapGetters({ nightOrder: "players/nightOrder" }),
    // 获取当前用户角色（服务器数据优先）
    userRole() {
      const serverRole = this.users?.get(this.session.playerId)?.role;
      return serverRole || null;
    },
    index: function () {
      return this.players.indexOf(this.player);
    },
    voteLocked: function () {
      const session = this.session;
      const players = this.players.length;
      if (!session.nomination) return false;
      const indexAdjusted =
        (this.index - 1 + players - session.nomination[1]) % players;
      return indexAdjusted < session.lockedVote - 1;
    },
    zoom: function () {
      const unit = window.innerWidth > window.innerHeight ? "vh" : "vw";
      if (this.players.length < 7) {
        return { width: 18 + this.grimoire.zoom + unit };
      } else if (this.players.length <= 10) {
        return { width: 16 + this.grimoire.zoom + unit };
      } else if (this.players.length <= 15) {
        return { width: 14 + this.grimoire.zoom + unit };
      } else {
        return { width: 12 + this.grimoire.zoom + unit };
      }
    },
    // 来自语音模块的禁言状态
    isVoiceMuted() {
      const voice = this.$store.state.voiceChat;
      if (!voice) return false;
      if (voice.permissions && voice.permissions.globalMute) return true;
      const perms = voice.playerPermissions || {};
      const pid = this.player.id;
      return !!(pid && perms[pid] && perms[pid].isMuted);
    },
  },
  watch: {
    "player.role": {
      handler(newRole, oldRole) {
        console.log(`=== Player组件 role变化 ===`);
        console.log(`玩家: ${this.player.name}`);
        console.log(`旧角色:`, oldRole);
        console.log(`新角色:`, newRole);
        console.log(`新角色ID:`, newRole?.id);
        console.log(`新角色ID类型:`, typeof newRole?.id);
        console.log(`新角色ID是否为null:`, newRole?.id === null);
        console.log(`新角色ID是否为undefined:`, newRole?.id === undefined);
        console.log(`新角色ID是否为falsy:`, !newRole?.id);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      isMenuOpen: false,
      isSwap: false,
    };
  },
  methods: {
    $t(key, params = {}) {
      return i18n.t(key, params);
    },
    changePronouns() {
      if (this.userRole === 'storyteller' && this.player.id !== this.session.playerId)
        return;
      const pronouns = prompt(this.$t("player.pronouns"), this.player.pronouns);
      //Only update pronouns if not null (prompt was not cancelled)
      if (pronouns !== null) {
        this.updatePlayer("pronouns", pronouns, true);
      }
    },
    toggleStatus() {
      if (this.grimoire.isPublic) {
        if (!this.player.isDead) {
          this.updatePlayer("isDead", true);
          if (this.player.isMarked) {
            this.updatePlayer("isMarked", false);
          }
        } else if (this.player.isVoteless) {
          this.updatePlayer("isVoteless", false);
          this.updatePlayer("isDead", false);
        } else {
          this.updatePlayer("isVoteless", true);
        }
      } else {
        this.updatePlayer("isDead", !this.player.isDead);
        if (this.player.isMarked) {
          this.updatePlayer("isMarked", false);
        }
        if (this.player.isVoteless) {
          this.updatePlayer("isVoteless", false);
        }
      }
    },
    changeName() {
      if (this.userRole === 'storyteller') return;
      const name =
        prompt(this.$t("prompts.playerName"), this.player.name) ||
        this.player.name;
      this.updatePlayer("name", name, true);
    },
    removeReminder(reminder) {
      console.log("removeReminder called with:", reminder);
      const reminders = [...this.player.reminders];
      reminders.splice(this.player.reminders.indexOf(reminder), 1);

      // 记录reminder移除
      if (this.userRole !== 'storyteller') {
        console.log("Recording reminder removed");
        try {
          recordReminderRemoved(reminder, this.player, this.$store);
        } catch (error) {
          console.error("Error recording reminder removed:", error);
        }
      }

      this.updatePlayer("reminders", reminders, true);
    },
    updatePlayer(property, value, closeMenu = false) {
      if (
        this.userRole === 'storyteller' &&
        property !== "reminders" &&
        property !== "pronouns"
      )
        return;

      // 记录玩家状态变更
      if (property === "isDead") {
        if (value) {
          // 玩家死亡
          this.$store.commit("addHistoryEvent", {
            action: "player_died",
            playerName: this.player.name,
            reason: "被处决",
            summary: `${this.player.name} 死亡`,
            details: `玩家 ${this.player.name} 被处决死亡`,
            isPublic: true,
          });
        } else {
          // 玩家复活
          this.$store.commit("addHistoryEvent", {
            action: "player_revived",
            playerName: this.player.name,
            summary: `${this.player.name} 复活`,
            details: `玩家 ${this.player.name} 复活`,
            isPublic: true,
          });
        }
      } else if (property === "isVoteless") {
        if (value) {
          // 玩家失去投票权
          this.$store.commit("addHistoryEvent", {
            action: "player_voteless",
            playerName: this.player.name,
            summary: `${this.player.name} 失去投票权`,
            details: `玩家 ${this.player.name} 失去投票权`,
            isPublic: false,
          });
        } else {
          // 玩家恢复投票权
          this.$store.commit("addHistoryEvent", {
            action: "player_vote_restored",
            playerName: this.player.name,
            summary: `${this.player.name} 恢复投票权`,
            details: `玩家 ${this.player.name} 恢复投票权`,
            isPublic: false,
          });
        }
      } else if (property === "isNominated") {
        if (value) {
          // 玩家被提名
          this.$store.commit("addHistoryEvent", {
            action: "player_nominated",
            playerName: this.player.name,
            summary: `${this.player.name} 被提名`,
            details: `玩家 ${this.player.name} 被提名待处决`,
            isPublic: true,
          });
        } else {
          // 玩家提名被取消
          this.$store.commit("addHistoryEvent", {
            action: "player_nomination_cancelled",
            playerName: this.player.name,
            summary: `${this.player.name} 提名被取消`,
            details: `玩家 ${this.player.name} 的提名被取消`,
            isPublic: true,
          });
        }
      }

      this.$store.commit("players/update", {
        player: this.player,
        property,
        value,
      });
      if (closeMenu) {
        this.isMenuOpen = false;
      }
    },
    removePlayer() {
      this.isMenuOpen = false;
      this.$emit("trigger", ["removePlayer"]);
    },
    swapPlayer(player) {
      this.isMenuOpen = false;
      this.$emit("trigger", ["swapPlayer", player]);
    },
    movePlayer(player) {
      this.isMenuOpen = false;
      this.$emit("trigger", ["movePlayer", player]);
    },
    nominatePlayer(player) {
      this.isMenuOpen = false;
      this.$emit("trigger", ["nominatePlayer", player]);
    },
    cancel() {
      this.$emit("trigger", ["cancel"]);
    },
    claimSeat() {
      this.isMenuOpen = false;
      this.$emit("trigger", ["claimSeat"]);
    },
    /**
     * Allow the ST to override a locked vote.
     */
    vote() {
      if (this.userRole === 'storyteller') return;
      if (!this.voteLocked) return;
      this.$store.commit("session/voteSync", [
        this.index,
        !this.session.votes[this.index],
      ]);
    },
    openActionPanel() {
      this.$emit("trigger", ["openActionPanel"]);
    },
  },
};
</script>

<style lang="scss">
@import "../vars.scss";

.fold-enter-active,
.fold-leave-active {
  transition: transform 250ms ease-in-out;
  transform-origin: left center;
  transform: perspective(200px);
}
.fold-enter,
.fold-leave-to {
  transform: perspective(200px) rotateY(90deg);
}

/***** Player token *****/
.circle .player {
  margin-bottom: 10px;

  &:before {
    content: " ";
    display: block;
    padding-top: 100%;
  }

  .shroud {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 45%;
    cursor: pointer;
    transform: rotateX(0deg);
    transform-origin: top center;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));

    &:before {
      content: " ";
      background: url("../assets/shroud.png") center -10px no-repeat;
      background-size: auto 110%;
      position: absolute;
      margin-left: -50%;
      width: 100%;
      height: 100%;
      left: 50%;
      top: -30%;
      opacity: 0;
      transform: perspective(400px) scale(1.5);
      transform-origin: top center;
      transition: all 200ms;
      pointer-events: none;
    }

    #townsquare.spectator & {
      pointer-events: none;
    }

    #townsquare:not(.spectator) &:hover:before {
      opacity: 0.5;
      top: -10px;
      transform: scale(1);
    }
  }

  &.dead .shroud:before {
    opacity: 1;
    top: 0;
    transform: perspective(400px) scale(1);
  }

  #townsquare:not(.spectator) &.dead .shroud:hover:before {
    opacity: 1;
  }
}

/****** Life token *******/
.player {
  z-index: 2;
  .life {
    border-radius: 50%;
    width: 100%;
    background: url("../assets/life.png") center center;
    background-size: 100%;
    border: 3px solid black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: perspective(400px) rotateY(180deg);
    backface-visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;

    &:before {
      content: " ";
      display: block;
      padding-top: 100%;
    }
  }

  &.dead {
    &.no-vote .life:after {
      display: none;
    }

    .life {
      background-image: url("../assets/death.png");

      &:after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: url("../assets/vote.png") center center no-repeat;
        background-size: 50%;
        height: 100%;
        pointer-events: none;
      }
    }
  }

  &.traveler .life {
    filter: grayscale(100%);
  }
}

#townsquare.public .player {
  .shroud {
    transform: perspective(400px) rotateX(90deg);
    pointer-events: none;
  }

  .life {
    transform: perspective(400px) rotateY(0deg);
  }

  &.traveler:not(.dead) .token {
    transform: perspective(400px) scale(0.8);
    pointer-events: none;
    transition-delay: 0s;
  }

  &.traveler.dead .token {
    transition-delay: 0s;
  }
}

/***** Role token ******/
.player .token {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transition: transform 200ms ease-in-out;
  transform: perspective(400px) rotateY(0deg);
  backface-visibility: hidden;
}

#townsquare.public .circle .token {
  transform: perspective(400px) rotateY(-180deg);
}

/****** Player choice icons *******/
.player .overlay {
  width: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  &:after {
    content: " ";
    display: block;
    padding-top: 100%;
  }
}
.player .overlay svg {
  position: absolute;
  filter: drop-shadow(0 0 3px black);
  z-index: 2;
  cursor: pointer;
  &.swap,
  &.move,
  &.nominate,
  &.vote,
  &.cancel {
    width: 50%;
    height: 60%;
    opacity: 0;
    pointer-events: none;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0.2);
    * {
      stroke-width: 10px;
      stroke: white;
      fill: url(#default);
    }
    &:hover *,
    &.fa-hand-paper * {
      fill: url(#demon);
    }
    &.fa-times * {
      fill: url(#townsfolk);
    }
  }
}

// other player voted yes, but is not locked yet
#townsquare.vote .player.vote-yes .overlay svg.vote.fa-hand-paper {
  opacity: 0.5;
  transform: scale(1);
}

// you voted yes | a locked vote yes | a locked vote no
#townsquare.vote .player.you.vote-yes .overlay svg.vote.fa-hand-paper,
#townsquare.vote .player.vote-lock.vote-yes .overlay svg.vote.fa-hand-paper,
#townsquare.vote .player.vote-lock:not(.vote-yes) .overlay svg.vote.fa-times {
  opacity: 1;
  transform: scale(1);
}

// a locked vote can be clicked on by the ST
#townsquare.vote:not(.spectator) .player.vote-lock .overlay svg.vote {
  pointer-events: all;
}

li.from:not(.nominate) .player .overlay svg.cancel {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

li.swap:not(.from) .player .overlay svg.swap,
li.nominate .player .overlay svg.nominate,
li.move:not(.from) .player .overlay svg.move {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

/****** Vote icon ********/
.player .has-vote {
  color: #fff;
  filter: drop-shadow(0 0 3px black);
  transition: opacity 250ms;
  z-index: 2;

  #townsquare.public & {
    opacity: 0;
    pointer-events: none;
  }
}

.has-vote {
  position: absolute;
  margin-top: -15%;
  right: 2px;
}

/****** Session seat glow *****/
@mixin glow($name, $color) {
  @keyframes #{$name}-glow {
    0% {
      box-shadow: 0 0 rgba($color, 1);
      border-color: $color;
    }
    50% {
      border-color: black;
    }
    100% {
      box-shadow: 0 0 20px 16px transparent;
      border-color: $color;
    }
  }

  .player.you.#{$name} .token {
    animation: #{$name}-glow 5s ease-in-out infinite;
  }
}

@include glow("townsfolk", $townsfolk);
@include glow("outsider", $outsider);
@include glow("demon", $demon);
@include glow("minion", $minion);
@include glow("traveler", $traveler);

.player.you .token {
  animation: townsfolk-glow 5s ease-in-out infinite;
}

/****** Marked icon ******/
.player .marked {
  position: absolute;
  width: 100%;
  top: 0;
  filter: drop-shadow(0px 0px 6px black);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 250ms;
  opacity: 0;
  &:before {
    content: " ";
    padding-top: 100%;
    display: block;
  }
  svg {
    height: 60%;
    width: 60%;
    position: absolute;
    stroke: white;
    stroke-width: 15px;
    path {
      fill: white;
    }
  }
}
.player.marked .marked {
  opacity: 0.5;
}

/****** Seat icon ********/
.player .seat {
  position: absolute;
  left: 2px;
  margin-top: -15%;
  color: #fff;
  filter: drop-shadow(0 0 3px black);
  cursor: default;
  z-index: 2;
  &.highlight {
    animation-iteration-count: 1;
    animation: redToWhite 1s normal forwards;
  }
}

// highlight animation
@keyframes redToWhite {
  from {
    color: $demon;
  }
  to {
    color: white;
  }
}

.player.you .seat {
  color: $townsfolk;
}

/***** Voice muted flag *****/
.player .voice-muted-flag {
  position: absolute;
  top: -6%;
  right: 50%;
  transform: translateX(50%);
  background: rgba(244, 67, 54, 0.85);
  color: white;
  border: 2px solid black;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 70%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  z-index: 5;
}

/***** Player name *****/
.player > .name {
  right: 10%;
  display: flex;
  justify-content: center;
  font-size: 120%;
  line-height: 120%;
  cursor: pointer;
  white-space: nowrap;
  width: 120%;
  background: rgba(0, 0, 0, 0.5);
  border: 3px solid black;
  border-radius: 10px;
  top: 5px;
  box-shadow: 0 0 5px black;
  padding: 0 4px;

  svg {
    top: 3px;
    margin-right: 2px;
  }

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    flex-grow: 1;
  }

  #townsquare:not(.spectator) &:hover,
  &.active {
    color: red;
  }

  &:hover .pronouns {
    opacity: 1;
    color: white;
  }

  .pronouns {
    display: flex;
    position: absolute;
    right: 110%;
    max-width: 250px;
    z-index: 25;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    border: 3px solid black;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    padding: 0 4px;
    bottom: -3px;

    &:before {
      content: " ";
      border: 10px solid transparent;
      width: 0;
      height: 0;
      border-left-color: black;
      position: absolute;
      margin-left: 2px;
      left: 100%;
    }
  }
}

.player.dead > .name {
  opacity: 0.5;
}

/***** Player menu *****/
.player > .menu {
  position: absolute;
  left: 110%;
  bottom: -5px;
  text-align: left;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.5);
  padding: 2px 5px;
  border-radius: 10px;
  border: 3px solid #000;
  margin-left: 15px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

  &:before {
    content: " ";
    width: 0;
    height: 0;
    position: absolute;
    border: 10px solid transparent;
    border-right-color: black;
    right: 100%;
    bottom: 5px;
    margin-right: 2px;
  }

  li:hover {
    color: red;
  }

  li.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    &:hover {
      color: white;
    }
  }

  svg {
    margin-right: 2px;
  }
}

/***** Ability text *****/
#townsquare.public .circle .ability {
  display: none;
}
.circle .player .shroud:hover ~ .token .ability,
.circle .player .token:hover .ability {
  opacity: 1;
}

/**** Night reminders ****/
.player .night-order {
  z-index: 3;
}

.player.dead .night-order em {
  color: #ddd;
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, gray 100%);
}

/***** Reminder token *****/
.circle .reminder {
  background: url("../assets/reminder.png") center center;
  background-size: 100%;
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0 0 -25%;
  border-radius: 50%;
  border: 3px solid black;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all 200ms;
  cursor: pointer;

  .text {
    line-height: 90%;
    color: black;
    font-size: 50%;
    font-weight: bold;
    text-align: center;
    margin-top: 50%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 15%;
    text-shadow:
      0 1px 1px #f6dfbd,
      0 -1px 1px #f6dfbd,
      1px 0 1px #f6dfbd,
      -1px 0 1px #f6dfbd;
  }

  .icon,
  &:after {
    content: " ";
    position: absolute;
    top: 0;
    width: 90%;
    height: 90%;
    background-size: 100%;
    background-position: center 0;
    background-repeat: no-repeat;
    background-image: url("../assets/icons/plus.png");
    transition: opacity 200ms;
  }

  &:after {
    background-image: url("../assets/icons/x.png");
    opacity: 0;
    top: 5%;
  }

  &.add {
    opacity: 0;
    top: 0;
    &:after {
      display: none;
    }
    .icon {
      top: 5%;
    }
  }

  &.custom {
    .icon {
      display: none;
    }
    .text {
      font-size: 70%;
      word-break: break-word;
      margin-top: 0;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
      border-radius: 50%;
      top: 0;
    }
  }

  &:hover:before {
    opacity: 0;
  }
  &:hover:after {
    opacity: 1;
  }
}

.circle .reminderHoverTarget {
  opacity: 0;
  width: calc(50% + 8px);
  padding-top: calc(50% + 38px);
  margin-top: calc(-25% - 33px);
  margin-left: calc(-25% - 1px);
  border-radius: 0 0 999px 999px;
  pointer-events: auto;
  transform: none !important;
  z-index: -1;
}

.circle li:hover .reminder.add {
  opacity: 1;
  top: 0;
}
.circle li:hover .reminder.add:before {
  opacity: 1;
}

#townsquare.public .reminder {
  opacity: 0;
  pointer-events: none;
}

/***** Night Order Indicators *****/
.night-order-indicator {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
  z-index: 15;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  top: 15%;
  
  &.first-night {
    background: #e74c3c; /* 红色 */
    left: 5%;
  }
  
  &.other-night {
    background: #3498db; /* 蓝色 */
    right: 5%;
  }
}

/* 在不同缩放状态下调整指示器大小 */
.circle li:nth-child(1) .night-order-indicator,
.circle li:nth-child(2) .night-order-indicator,
.circle li:nth-child(-n+3) .night-order-indicator {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

/* 确保指示器不会被其他元素遮挡 */
.night-order-indicator {
  pointer-events: auto;
}

/* 在移动设备上的调整 */
@media (max-width: 768px) {
  .night-order-indicator {
    width: 20px;
    height: 20px;
    font-size: 10px;
    
    &.first-night {
      left: 3%;
    }
    
    &.other-night {
      right: 3%;
    }
  }
}

/* 死亡状态下的样式调整 */
.player.dead .night-order-indicator {
  opacity: 0.6;
  filter: grayscale(30%);
}

/* 悬停效果 */
.night-order-indicator:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* 确保指示器在各种状态下都能正确显示 */
.player .night-order-indicator {
  user-select: none;
  pointer-events: auto;
}

/* 在夜间顺序模式下隐藏我们的自定义指示器，避免与原有的重复 */
#townsquare.night-order .night-order-indicator {
  display: none;
}
</style>
